<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 课程管理 </el-breadcrumb-item>
        <el-breadcrumb-item>课程学习</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--在视频外面加一个容器 -->
    <div class="container">
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div class="input_video">
              <video-player class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            :playsinline="true"
                            @ready="playerReadied"
                            @timeupdate="onPlayerTimeupdate($event)"
                            @pause="onPlayerPause($event)"
                            :options="playerOptions"></video-player>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"
               style="padding-left: 30px">
            <div>
              <el-tabs v-model="activeName"
                       type="card"
                       @tab-click="handleClick">
                <el-tab-pane label="简介"
                             name="first"
                             style="padding-left:20px;">
                  <p v-text="introduction"
                     style="width: 220px"></p>
                </el-tab-pane>
                <el-tab-pane label="目录"
                             name="second">
                  <el-table :data="courseList"
                            @row-click="courseChange"
                            size="mini"
                            :show-header="false"
                            style="width: 100%">
                    <el-table-column prop="coursename"
                                     style="width:60%;padding-left:20px;"></el-table-column>
                    <el-table-column prop="status"
                                     style="width:40%;padding-left:20px;">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="附件"
                             name="thrid">
                  <el-table :data="accessoryList"
                            @row-click="accessoryDownload"
                            size="mini"
                            :show-header="false"
                            style="width: 100%">
                    <el-table-column prop="name">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 70px">
        <el-col :span="16">
          <div class="grid-content bg-purple-dark">
            <div>
              <Comment :userid="userid"
                       :courseid="courseid"></Comment>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Comment from '../common/comment.vue';
export default {
    components: {
        Comment
    },
    data() {
        return {
            training: {
                id: ''
            },
            commentList: [],
            userid: 2,
            courseid: -1,
            introduction: [],
            courseList: [],
            accessoryList: [],
            activeName: 'second',
            courseProgressing: {
                id: '',
                progressing: ''
            },
            myplayer: {},
            gklog: '', //视频观看时长
            percentage: '', //进度
            totalTime: '', //视频总时长
            // 视频播放
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: '',
                        src: '' //url地址
                    }
                ],
                poster: '', //你的封面地址
                // width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, //当前时间和持续时间的分隔符
                    durationDisplay: false, //显示持续时间
                    remainingTimeDisplay: false, //是否显示剩余时间功能
                    fullscreenToggle: true //全屏按钮
                }
            }
        };
    },
    methods: {
        handleClick(tab) {
            let index = tab.index;
            if (index == 0) {
            }
        },
        findTrainingById() {
            this.$axios
                .post('/api/trainings/findTraining/1/1', this.training)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.introduction = res.data.data.list[0].introduction;
                    }
                })
                .catch();
        },
        findCourseByTrainingId() {
            this.$axios
                .post('/api/trainings/findCrouseBytrainingId', this.training)
                .then((res) => {
                    //  console.log(res);
                    if (res.data.code == 200) {
                        this.courseList = res.data.data;
                        this.isFinished();
                        // console.log(this.courseList);
                        //this.courseid = res.data.data[0].id;
                        //  console.log('請求后',this.courseid);
                        for (let i = 0; i < this.courseList.length; i++) {
                            if (this.courseid == this.courseList[i].id) {
                                this.accessoryList = this.courseList[i].accessoryList;
                                this.playerOptions.sources[0].src = this.courseList[i].video;
                                this.courseList[i].status='未完成'
                            }
                        }
                    }
                })
                .catch();
        },
        //是否完成的状态查询
        isFinished() {
            for (let i = 0; i < this.courseList.length; i++) {
                this.$axios
                    .get('/api/course/findCourseProgressing/' + this.userid + '/' + this.courseList[i].id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            if (res.data.data == 100) {
                                this.courseList[i].status = '已完成';
                            } else {
                                this.courseList[i].status = '未完成';
                            }
                        }
                    })
                    .catch();
            }
        },
        findCourseProgressing(player) {
            this.$axios
                .get('/api/course/findCourseProgressing/' + this.userid + '/' + this.courseid)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.totalTime = player.cache_.duration;
                        if (isNaN(this.totalTime)) {
                            this.findCourseProgressing(player);
                        }
                        this.percentage = res.data.data;
                        this.gklog = this.percentage * this.totalTime * 0.01;

                        player.currentTime(this.gklog);
                    }
                })
                .catch();
        },
        courseChange(res) {
            //this.findComments();
            this.courseProgressing.id = this.courseid;
            this.courseid = res.id; //切换后的id
            //this.findCourseProgressing();

            //res为当前点击的课程对象 应当跳转到该页面
            this.playerOptions.sources[0].src = res.video;
            this.accessoryList = res.accessoryList;
            //this.playerReadied(this.myplayer);//设置时间

            // this.myplayer.currentTime(this.gklog);
            this.saveCourseTime();
            this.isFinished();
        },
        accessoryDownload(res) {
            window.location.href = res.url;
        },
        /* 获取视频播放进度 */
        onPlayerTimeupdate(player) {
            this.gklog = player.cache_.currentTime;
            this.totalTime = player.cache_.duration;
            this.percentage = parseInt((this.gklog / this.totalTime) * 100).toFixed(0);
        },
        // 暂停
        onPlayerPause(player) {
            this.saveCourseTime();
            this.isFinished();
        },
        /* 设置视频进度 */
        playerReadied(player) {
            this.courseProgressing.id = this.courseid;
            this.findCourseProgressing(player);
        },
        // 保存课程进度
        saveCourseTime() {
            //保存课程学习数据
            this.courseProgressing.progressing = this.percentage;
            this.$axios
                .post('/api/course/saveCourseTime' + '/' + this.userid, this.courseProgressing)
                .then((res) => {
                    // if (res.data.code == 200) {
                    // }
                })
                .catch();
        }
    },
    created() {
        (this.userid = localStorage.getItem('id')),
            (this.training.id = localStorage.getItem('trainingid')),
            // console.log(this.training.id);
            (this.courseid = localStorage.getItem('courseid'));
        // console.log(this.courseid);
        this.findTrainingById();
        //this.findComments();
        // this.training.id = localStorage.getItem('trainingID'),
        //console.log('請求前',this.courseid)
        this.findCourseByTrainingId();
    },

    watch: {
        // 监听路由变化
        '$route.path': function (newVal, oldVal) {
            this.saveCourseTime();
        },
        playerOptions: {
            handler(newVal) {
                //this.saveCourseTime();
                // this.gklog = 0;
            },
            deep: true
        },
        data() {
            this.load();
        }
    }
};
</script>
<style>
.el-table .cell {
    /* padding-left: 49px; */
    text-align: center;
    font-size: 14px;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
    width: 100%;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
    width: 33%;
}
.input_video {
    width: 800px;
    height: 400px;
    margin: 0 auto;
}

/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.45);
    font-size: 3.5em;
    border-radius: 50%;
    height: 2em !important;
    line-height: 2em !important;
    margin-top: -1em !important;
    margin-left: -1em !important;
    width: 2em !important;
    outline: none;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time {
    order: 3 !important;
}

/*进度条背景轨道*/
.video-js .vjs-slider {
    border-radius: 1em;
}

/*进度条进度*/
.vjs-custom-skin > .video-js .vjs-play-progress,
.vjs-custom-skin > .video-js .vjs-volume-level {
    border-radius: 1em;
}

/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button,
.vjs-custom-skin > .video-js .vjs-big-play-button:active,
.vjs-custom-skin > .video-js .vjs-big-play-button:focus {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/*control bar*/
.video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button {
    outline: none;
}
/* 不可拖动进度条 */
.vjs-progress-control {
    pointer-events: none !important;
}
</style>